<template>
  <div>
    <div class="home-content" v-for="item in articleListItems" :key="item.id">
      <h2 @click="toArticle(item.id)">{{item.subject}}</h2>
      <div class="content-bottom" @click="toArticle(item.id)">
        <div class="content-left">
          <div class="traingle"></div>
          <p>{{item.articlePersonalCategoryName}}</p>
        </div>
        <div class="content-right">
          <div class="content-inner">
            <p>
              <span class="count">{{item.viewCount}}</span>
              <span>推荐</span>
            </p>
            <p>
              <span class="count">{{item.voteCount}}</span>
              <span>阅读</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetHotList } from "../../../../../API/personal";
export default {
  name: "HOT",
  data() {
    return {
      activeName: "first",
      articleListItems: [
        // {
        //   id: "",
        //   subject: "PHP7数据结构与算法分析：前言",
        //   voteCount: 4, //推荐
        //   viewCount: 6711, //阅读
        //   articlePersonalCategoryName: "PHP7数据结构和算法参考知识点",
        // },
      ],
    };
  },
  // props: {
  //   user: Object,
  // },
  async mounted() {
    //先判断用户是否已经登录了
    const dataId = this.$route.params.userId;
   
    const res = await reqGetHotList(`?id=${dataId}`);
    
    this.articleListItems = res.data.articleListItems;
  },
  methods: {
    toArticle(row) {
      this.$router.history.push({
        path: `/article/${row}`,
        // pramas: {
        //   row,
        // },
      });
      console.log(row);
    },
  },
};
</script>

<style  scoped>
.content-bottom {
  display: flex;
  position: relative;
  height: 30px;
  line-height: 30px;
  margin: 10px 0;
  justify-content: space-between;
}
.home-content {
  width: 825px;
  border-bottom: 1px dashed #4684e2;
}
.home-content h2 {
  color: #152844;
  line-height: 30px;
  height: 30px;
  margin: 20px 0;
}
.content-left p {
  margin-left: 15px;
  font-size: 14px;
}

.traingle {
  position: absolute;
  left: 0;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 6px solid #4684e2;
  border-right: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.content-right .content-inner {
  display: flex;
}
.content-inner p {
  margin: 0 3px;
  font-size: 14px;
}
.content-inner .count {
  color: #4684e2;
  margin-right: 3px;
}
</style>
